<template>
	<view class="mine-wrap">
		<div class="userinfo">
			<div class="memberinfo" v-if="userInfo.avatar">
				<div class="touxiang">
					<image :src="userInfo.avatar" mode="widthFix"></image>
				</div>
				<div class="namelevel">
					<p>{{ userInfo.username }}</p>
					<!-- <div class="level" v-if="userInfo.vip_id > 0" @click="openMember">
						<image src="/static/mine/zuanshi.png" mode="widthFix"></image>
						<span>{{userInfo.vip_name}}</span>
					</div> -->
					<div class="openlevel" @click="openMember">
						<p>充值积分</p>
					</div>
				</div>
			</div>
			<div class="memberinfo" v-else @click.stop="toLogin">
				<div class="touxiang">
					<image src="/static/mine/avatar.png" mode="widthFix"></image>
				</div>
				<div class="namelevel">
					<p style="font-weight: bold; margin-top: 10px;">授权登录</p>
				</div>
			</div>
			<div class="logout" v-if="userInfo.avatar" @click="toLogout">
				<image src="/static/mine/zhuxiao.png" mode="widthFix"></image>
				<p>注销登录</p>
			</div>
		</div>
		<div class="navlist">
			<div class="navItem" v-for="(item, index) in navArr" :key="index" @click="toMyNav(item)">
				<image :src="item.src" mode="widthFix"></image>
				<p>{{ item.name }}</p>
			</div>
		</div>
		<div class="jifensign" @click="toSign">
			<div class="signtxt">
				<p>积分：<span>{{ userInfo.score }}</span></p>
				<span>签到领取积分</span>
			</div>
			<image src="/static/mine/jifen.png" mode=""></image>
		</div>
		<div class="otherserve">
			<div class="serverItem" v-for="(item, index) in serverArr" :key="index" @click="toMySever(item)">
				<div class="serverItemleft">
					<image :src="item.src" mode="widthFix"></image>
					<p>{{ item.name }}</p>
				</div>
				<div class="serverItemright">
					<image src="/static/mine/jiantou.png" mode="widthFix"></image>
				</div>
			</div>
		</div>
		<u-overlay :show="show" @click="show = false">
			<view class="warp">
				<view class="rect" @tap.stop>
					<p>联系客服</p>
					<span>扫码添加客服微信</span>
					<div class="erweima">
						<image :src="contactInfo.qrcode" mode="widthFix"></image>
					</div>
					<div class="hezuo">商务合作：{{ contactInfo.phone }}</div>
					<div class="lianxi" @click="concactUs">联系我们</div>
					<image class="guanbi" src="/static/mine/close.png" mode="widthFix" @click="show = false"></image>
				</view>
			</view>
		</u-overlay>

		<u-popup :show="isCheckPwd" mode="center" round="16" :safeAreaInsetBottom="false">
			<view class="popup-passwod">
				<image src="/static/mine/icon-close.png" class="icon-close" @click="closeCheckPwd"></image>
				<view class="title">验证密码</view>
				<view class="tips-box">
					<image src="/static/mine/tz.png" class="image"></image>
					<view class="">每7天需要验证一次密码</view>
				</view>
				<view class="input-box">
					<u-input v-model="password" type="password" placeholder="请输入密码" :border="false"
						:customStyle="{ height: '96rpx', background: '#F7F7F7', borderRadius: '24rpx', boxSizing: 'border-box' }"></u-input>
				</view>
				<view class="button-list">
					<view class="button" @click="$u.throttle(toLandlord, 2000)">登录</view>
					<view class="text" @click="forgetPassword">忘记密码</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import {
	mapGetters
} from "vuex";
import {
	getUserInfo,
	getContract
} from '@/api/mine.js'
import {
	isCheckPassword,
	verifyPassword,
} from '@/api/landlord.js'
import {
	getLoginscre
} from "@/api/gent.js";
export default {
	data() {
		return {
			navArr: [{
				type: 'publish',
				src: require('../../static/mine/fabu.png'),
				name: '我的发布'
			},
			{
				type: 'collect',
				src: require('../../static/mine/shoucang.png'),
				name: '我的收藏'
			},
			{
				type: 'record',
				src: require('../../static/mine/yulan.png'),
				name: '浏览记录'
			},
			{
				type: 'push',
				src: require('../../static/mine/tuisong.png'),
				name: '定制推送'
			}
			],
			serverArr: [{
				type: 'contact',
				src: require('../../static/mine/icon01.png'),
				name: '联系我们'
			},
			{
				type: 'guide',
				src: require('../../static/mine/icon02.png'),
				name: '操作指南'
			},
			{
				type: 'feedback',
				src: require('../../static/mine/icon03.png'),
				name: '意见反馈'
			},
			{
				type: 'landlord',
				src: require('../../static/mine/icon04.png'),
				name: '切换房东'
			}
			],
			show: false,
			userInfo: {},
			contactInfo: {
				phone: '',
				qrcode: ''
			},
			//是否验证栋长密码
			isCheckPwd: false,
			//栋长登录密码
			password: ''
		}
	},
	onShow() {
		this.getUserInfo();
		if (uni.getStorageSync('userInfo')) {
			let a = 0
			this.$Api.chat.getUserUnReadNumber().then(res => {
				a = res.data.data
				this.$Api.chat.getUserToUserUnReadNumber().then(res1 => {
					a = a + res1.data.data
					if (a > 0) {
						uni.setTabBarBadge({
							index: 3, // TabBar的索引
							text: a + '' // 显示的数字
						});
					} else {
						uni.removeTabBarBadge({
							index: 3, // TabBar的索引
						});
					}
				})
			})
		}
	},
	// onLoad() {
	// 	if (uni.getStorageSync('userInfo')) {
	// 		this.userInfo = uni.getStorageSync('userInfo');
	// 		console.log(this.userInfo, 'this.userInfo');
	// 	}
	// },
	methods: {
		async getloginscore() {
			const res = await getLoginscre();
		},
		closeCheckPwd() {
			this.isCheckPwd = false
			this.password = ''
		},
		toLandlord() {
			//验证密码有效性
			verifyPassword({
				password: this.password
			}).then(res => {
				this.closeCheckPwd()
				uni.navigateTo({
					url: '/pages-landlord/index'
				})
			})
		},
		forgetPassword() {
			this.closeCheckPwd()
			uni.navigateTo({
				url: '/pages-landlord/forget-password/forget-password'
			})
		},
		getUserInfo() {
			getUserInfo().then(res => {
				this.userInfo = res.data.data.userinfo;
				this.getloginscore();
			})
		},
		toMyNav(item) {
			// console.log(item);
			switch (item.type) {
				case 'publish':
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/mine/myRelease'
						})
					} else {
						uni.showModal({
							title: '',
							content: '请先重新登录',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					break;
				case 'collect':
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/mine/roomCollect'
						})
					} else {
						uni.showModal({
							title: '',
							content: '请先重新登录',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					break;
				case 'record':
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/mine/browseRecord'
						})
					} else {
						uni.showModal({
							title: '',
							content: '请先重新登录',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					break;
				case 'push':
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/mine/customPush'
						})
					} else {
						uni.showModal({
							title: '',
							content: '请先重新登录',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					break;
				default:
					break;
			}
		},
		toMySever(item) {
			switch (item.type) {
				case 'contact':
					this.show = true;
					this.getContract();
					break;
				case 'guide':
					uni.navigateTo({
						url: '/pages/mine/operateGuide'
					})
					break;
				case 'feedback':
					if (uni.getStorageSync('userInfo')) {
						uni.navigateTo({
							url: '/pages/mine/feedback'
						})
					} else {
						uni.showModal({
							title: '',
							content: '请先重新登录',
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});
					}
					break;
				case 'landlord':
					//是否需要验证密码
					isCheckPassword().then(res => {
						if (res.data.data == 1) {
							this.isCheckPwd = true
						} else {
							uni.navigateTo({
								url: '/pages-landlord/index'
							})
						}
					})
					break;
				default:
					break;
			}
		},
		toSign() {
			if (uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/mine/sign'
				})
			} else {
				uni.showModal({
					title: '',
					content: '请先重新登录',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		},
		toLogin() {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		},
		toLogout() {
			// console.log('注销登录');
			uni.removeStorageSync('userInfo');
			this.userInfo = {};
			uni.navigateTo({
				url: '/pages/login/login'
			})
			// uni.clearStorageSync();
		},
		async getContract() {
			const res = await getContract();
			if (res.response.statusCode === 200) {
				console.log(res.data.data, 'res.data.data');
				this.contactInfo = res.data.data;
				// this.userInfo = res.data.data.userinfo;
			}
		},
		concactUs() {
			uni.makePhoneCall({
				phoneNumber: this.contactInfo.phone
			});
		},
		openMember() {
			if (uni.getStorageSync('userInfo')) {
				uni.navigateTo({
					url: '/pages/mine/score-recharge'
				})
			} else {
				uni.showModal({
					title: '',
					content: '请先重新登录',
					success: function (res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/pages/login/login'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.popup-passwod {
	width: 622rpx;
	height: 630rpx;
	background: #FFFFFF;
	border-radius: 40rpx;
	box-sizing: border-box;
	padding: 48rpx 64rpx;
	position: relative;

	.icon-close {
		position: absolute;
		right: 56rpx;
		top: 36rpx;
		width: 32rpx;
		height: 32rpx;
	}

	.title {
		text-align: center;
		font-weight: bold;
		font-size: 38rpx;
		width: 300rpx;
		margin: 0 auto 20rpx;
	}

	.tips-box {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 338rpx;
		height: 42rpx;
		margin: 24rpx auto 0;
		background: linear-gradient(180deg, rgba(255, 0, 0, 0.08) 0%, rgba(255, 0, 0, 0) 100%);
		border-radius: 22rpx;
		border: 1rpx solid rgba(255, 0, 0, 0.25);
		font-size: 24rpx;
		color: #FF0000;

		.image {
			width: 30rpx;
			height: 30rpx;
		}
	}

	.input-box {
		margin-top: 80rpx;
	}

	.button-list {
		margin-top: 80rpx;
		text-align: center;

		.button {
			font-size: 30rpx;
			color: #FFFFFF;
			width: 494rpx;
			height: 88rpx;
			line-height: 88rpx;
			background: #FE4F04;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(254, 79, 4, 0.5);
			border-radius: 44rpx;
		}


		.text {
			margin-top: 64rpx;
			font-size: 26rpx;
			color: #9A9A9A;
		}
	}
}

.userinfo {
	width: 100%;
	height: 240px;
	background: url('../../static/mine/userbg.jpg') center no-repeat;
	background-size: 100% 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.memberinfo {
		display: flex;
		margin-left: 18px;

		.touxiang {
			margin-right: 10px;

			image {
				width: 60px;
				height: 60px;
				border-radius: 60px;
			}
		}

		.namelevel {
			p {
				font-family: PingFangHK, PingFangHK;
				font-weight: 500;
				font-size: 18px;
				color: #222222;
				margin-bottom: 6px;
				// line-height: 40px;
			}

			.level {
				// width: 67px;
				height: 20px;
				background: linear-gradient(203deg, #1CA9FE 0%, #0079FF 100%);
				border-radius: 11px;
				display: flex;
				padding: 2px 10px;

				image {
					width: 20px;
					height: 20px;
				}

				span {
					font-weight: 500;
					font-size: 14px;
					color: #FFFFFF;
				}
			}

			.openlevel {
				// width: 67px;
				height: 20px;
				background: linear-gradient(203deg, #1CA9FE 0%, #0079FF 100%);
				border-radius: 11px;
				text-align: center;
				padding: 2px 10px;

				p {
					font-weight: 500;
					font-size: 13px;
					color: #FFFFFF;
					line-height: 20px;
				}
			}
		}
	}

	.logout {
		width: 94px;
		height: 30px;
		background: #FFFFFF;
		border-radius: 16px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		text-align: center;
		line-height: 30px;
		margin-right: 18px;
		display: flex;
		align-items: center;

		image {
			width: 15px;
			height: 16px;
			margin-right: 5px;
			margin-left: 10px;
		}

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 14px;
			color: #222222;
		}
	}
}

.navlist {
	width: 84%;
	padding: 16px;
	margin: -60px auto 20px auto;
	background: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.navItem {
		text-align: center;

		image {
			width: 44px;
			height: 44px;
		}

		p {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 13px;
			color: #222222;
		}
	}
}

.jifensign {
	width: 84%;
	// height: 75px;
	background: linear-gradient(180deg, #F1F6FC 0%, #F1F6FC 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 16px 0px rgba(0, 149, 248, 0.16);
	border-radius: 12px;
	padding: 5px 16px;
	margin: 20px auto;
	display: flex;
	justify-content: space-between;
	align-items: center;

	image {
		width: 75px;
		height: 75px;
	}

	.signtxt {
		p {
			font-weight: 600;
			font-size: 14px;
			color: #222222;
			line-height: 30px;

			span {
				color: #0095F8;
				font-size: 14px;
			}
		}

		span {
			font-weight: 400;
			font-size: 12px;
			color: #999999;
		}
	}
}

.otherserve {
	.serverItem {
		width: 84%;
		padding: 16px;
		margin: 20px auto;
		background: #FFFFFF;
		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.serverItemleft {
			display: flex;
			align-items: center;

			image {
				width: 18px;
				height: 14px;
				margin-right: 10px;
			}

			p {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 14px;
				color: #000000;
			}
		}

		.serverItemright {
			image {
				width: 16px;
				height: 16px;
			}
		}
	}
}

.warp {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.rect {
	width: 295px;
	height: 464px;
	background: linear-gradient(180deg, #88BEF6 0%, #D1E1FE 100%);
	border-radius: 16px;
	text-align: center;
	position: relative;

	.guanbi {
		width: 36px;
		height: 36px;
		position: absolute;
		bottom: -50px;
		left: 45%;
	}

	p {
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		font-size: 22px;
		color: #011651;
		line-height: 30px;
		padding-top: 32px;
	}

	span {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 13px;
		color: #013251;
		line-height: 18px;
	}

	.erweima {
		width: 215px;
		height: 215px;
		background: linear-gradient(180deg, #FDFCFC 0%, #FAF8F7 100%);
		box-shadow: 0px 5px 23px 0px rgba(0, 149, 248, 0.5), inset 0px -2px 6px 0px #99D1FA;
		border-radius: 15px;
		margin: 20px auto;

		image {
			width: 181px;
			height: 181px;
			margin-top: 15px;
		}
	}

	.hezuo {
		width: 173px;
		height: 24px;
		background: #91C3FB;
		box-shadow: inset 0px 2px 5px 0px rgba(79, 89, 99, 0.08);
		font-family: PingFangSC, PingFang SC;
		font-weight: 500;
		font-size: 13px;
		line-height: 24px;
		color: #FFFFFF;
		margin: 20px auto;
	}

	.lianxi {
		width: 261px;
		height: 50px;
		background: url('../../static/mine/lianxi.png') center no-repeat;
		background-size: 100% 100%;
		line-height: 50px;
		text-align: center;
		color: #FFFFFF;
		font-weight: 600;
		font-size: 15px;
		margin: 0 auto;
		border-radius: 50px;
	}
}
</style>